<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
    <title>我要购票</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <link rel="stylesheet" href="/css/weui.min.css"/>
    <link rel="stylesheet" href="/css/weuix.css"/>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background: url([[${rule}]]) no-repeat;
            background-size: cover;
        }
        main {
            position: fixed;
            top: 0px;
        }

            main ol {
                width: 35%;
                list-style: none;
                right: 0;
                overflow: hidden;
                position: fixed;
                border-left: 1px solid rgba(33, 150, 243, 0.5);
                z-index: 3;
                overflow-y: auto;
                overflow-x: hidden;
                background-color: white;
            }

                main ol li {
                    width: 100%;
                    margin-left: 3px;
                    padding: 10px 0px 10px 0px;
                    font-size: 1rem;
                    font-family: 'Microsoft YaHei';
                    font-weight: 700;
                    color: darkgray;
                }

                    main ol li p {
                        font-size: 1rem;
                        font-family: 'Microsoft YaHei';
                        padding: 10px 10px 10px 10px;
                        color: blue;
                    }

            main ul {
                list-style: none;
                right: 0;
                width: 35%;
                background-color: white;
                border-left: 1px solid rgba(33, 150, 243, 0.5);
                margin-bottom: 2rem;
                overflow: hidden;
                position: fixed;
                z-index: 2;
                overflow-y: auto;
                overflow-x: hidden;
                display: none;
            }

                main ul li {
                    width: 100%;
                    margin-left: 3px;
                    padding: 10px 0 10px 10px;
                    font-size: 1rem;
                    font-family: 'Microsoft YaHei';
                    font-weight: 700;
                }

                    main ul li img {
                        width: 60px;
                        padding: 10px 0 10px 10px;
                    }

                    main ul li span {
                        font-size: 1rem;
                        font-family: 'Microsoft YaHei';
                        padding-left: 10px;
                    }
                    .weui-vcode-btn{
                        font-size: 15px;
                    }
                    .weui-cells{
                        background-color:transparent;
                    }
                    .weui-cells:after{
                        border-bottom:none;
                    }
                    .weui-cells:before{
                        border-top:none ;
                    }
    </style>
    <script src="/js/jquery.js"></script>
    <script src="/js/car.js"></script>
    <script src="/js/zepto.min.js"></script>
    <script src="/js/zepto.weui.js"></script>
    <script>
        var time=60;

        function timeSet(o){
            time=time-1;
            if(time==0){
                time=60;
                $(o).removeAttr("disabled").removeClass("weui-btn_loading").html("点击获取")
            }else{
                console.log(time);
                $(o).attr('disabled','disabled').html(time+"S").addClass("weui-btn_loading")
                setTimeout(function(){timeSet(o)},1000);
            }
        }

        function settime(o){
            try {
                if($("input[name=phone]").val()==""){
                    $.toast("请输入手机号", "cancel");
                    $("input[name=phone]").focus();
                }else if(!/^1[2-9][0-9]{9}$/.test($("input[name=phone]").val())){
                    $.toast("请输入正确的手机号", "cancel");
                    $("input[name=phone]").focus();
                }else{
                    $(o).attr('disabled','disabled');
                    $.post("/api/Validator/",$("form").serialize(),function(result){
                        if(result.hasError){
                            $.toast("发送短信失败", "cancel");
                            $(o).removeAttr("disabled");
                        }else{
                            $("input[name=wechatPayGuid]").focus();
                            $.toast("发送成功","success");
                            timeSet(o);
                        }
                    }).error(function(){
                        $.toast("发送短信失败", "cancel");
                        $(o).removeAttr("disabled");
                    })
                }
            }catch(e){

            }
        }

        $(function(){
            
            var width=[[${person}]];
            var height=[[${number}]];
            var top=[[${top}]];
            var price=[[${price}]];

            $("input[name=avatar]").click(function () { $('main > ul').show(); $("ol").show();$(this).blur() })
            $("body").css('height', ($(window).width() / width * height) + "px");
            $("form").css({'padding-top':($(window).width() / width * top) + "px","width":"70%","padding-left":"15%"})
            $("[name=count]").change(function(){
                $("input[name=amount]").val(parseInt($(this).val())*price);
            })
            $("form").submit(function(){
                try {
                    $.post("/api/OrderForm/",$(this).serialize(),function(result){
                        if(result.hasError){
                            $.toast("保存失败", "cancel");
                        }else{
                            location.href="/wechat/index/"+result.data.orderFormId
                        }
                    }).error(function(){
                        $.toast("保存失败", "cancel");
                    })
                }catch(e){

                }

                return false;
            })
        })
    </script>
</head>
<body >
    <form class="weui-form" method="POST">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd" style="color: red;">*&nbsp;</div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="phone" pattern="^1[2-9][0-9]{9}$" placeholder="请输入手机号" type="tel" required>
                </div>
            </div>
            <div class="weui-cell weui-cell_vcode">
                <div class="weui-cell__hd" style="color: red;">*&nbsp;</div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="wechatPayGuid" placeholder="请输入验证码" type="number" required>
                </div>
                <div class="weui-cell__ft">
                    <button  type="button" class="weui-vcode-btn" onclick="settime(this)">点击获取</button>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd" style="color: red;">*&nbsp;</div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="name" placeholder="请输入姓名" type="text" required>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd" style="color: red;">*&nbsp;</div>
                <div class="weui-cell__bd">
                    <select class="weui-input" required name="count" >
                        <option value="">请选择购票数量</option>
                        <option value="1">购买1张票</option>
                        <option value="2">购买2张票</option>
                        <option value="3">购买3张票</option>
                        <option value="4">购买4张票</option>
                        <option value="5">购买5张票</option>
                        <!--<option value="6">购买6张票</option>
                        <option value="7">购买7张票</option>
                        <option value="8">购买8张票</option>
                        <option value="9">购买9张票</option>
                        <option value="10">购买10张票</option>-->
                    </select>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd" style="color: red;"></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="avatar" placeholder="请选择品牌车型" type="text" >
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd" style="color: red;">购票金额：￥</div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="amount" style="text-align: center;color: red;"  type="number" readonly>
                </div>
                <div class="weui_cell__ft" style="color: red;">
                    元
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                <div class="button-sp-area">
                    <input type="hidden" th:value="${openId}" name="openId">
                    <input type="hidden" th:value="${typeName}" name="typeName">
                    <input type="hidden" th:value="${ticketTypeId}" name="ticketTypeId">
                    <input type="hidden" th:value="${projectId}" name="projectId">
                    <input type="hidden" th:value="${projectId}" name="code">
                    <button  class="weui-btn weui-btn_primary">购  票</button>
                </div>
                </div>
            </div>
        </div>
    </form>    
    <main>
        <ul></ul>
        <ol></ol>
    </main>
</body>
</html>